<div class="content">
    <div id="example_title">
        <h1>Event Binding</h1>
        To comply with strictest CSP, you should not add inline event handlers. Sometimes it is useful to do so, especially
        when you pass HTML arround. This is where binding becomes handy.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<style>
#encode {
    width: 600px;
    height: 450px;
    resize: vertical;
}
#div {
    background-color: #f9f9f9;
    border: 1px solid #efefef;
    border-radius: 5px;
    padding: 20px;
    margin: 50px 0;
    width: 200px;
}
</style>
<div id="div" data-mouseenter="showTooltip|some text|event|this" data-mouseleave="hideTooltip">
    Hove over for tooltip
</div>

<!--CODE-->
<script type="module">
import { w2utils, w2tooltip, query } from '__W2UI_PATH__'

var owner = {
    showTooltip(txt, event, el) {
        w2tooltip.show({
            name: 'custom-tooltip',
            anchor: query('#div')[0],
            html: txt,
            hideOn: [],
        })
        console.log(event, el)
    },
    hideTooltip() {
        w2tooltip.hide('custom-tooltip')
    }
}
query(() => {
    // bind event on read
    w2utils.bindEvents(query('#div'), owner)
})
</script>
<!--CODE-->